<template>
  <div :id="id" :style="{ height: height + '%', width: width + '%' }" />
</template>
<script>
export default {
  name: 'VChartLine',
  props: {
    height: {
      type: Number,
      default: 100
    },
    width: {
      type: Number,
      default: 100
    },
    legend: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 图表形状颜色, ecahrts依次选择颜色渲染
    color: {
      type: Array,
      default: function() {
        return ['#3e96fd']
      }
    },
    // 纵坐标数据
    seriesData: {
      type: Array,
      default: function() {
        return []
      }
    },
    lineData: {
      type: Array,
      default: function() {
        return []
      }
    },
    title: {
      type: String,
      default: function() {
        return ''
      }
    },
    xname: {
      type: String,
      default: function() {
        return ''
      }
    },
    yname: {
      type: String,
      default: function() {
        return ''
      }
    },
    legendTop: {
      type: Number,
      default: 40
    },
    legendRight: {
      type: Number,
      default: 4
    },

    category: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      colors: ['#d14a61', '#02dfe8', '#675bba']
    }
  },
  computed: {
    // 生成一个随机id, 实现图表组件的复用
    id: function() {
      return parseInt(Math.random() * 1000000)
    },
    legendData: function() {
      const legendData = []
      this.seriesData.forEach(function(elem) {
        legendData.push(elem.name)
      })
      return legendData
    }
  },
  watch: {
    seriesData() {
      this.renderChart()
    }
  },
  mounted() {
    this.renderChart()
  },
  updated() {
    this.renderChart()
  },
  methods: {
    renderChart: function() {
      if (this.chart) {
        this.chart.dispose()
      }
      // 初始化echart
      this.chart = this.$echarts.init(document.getElementById(this.id))
      // 自定义eChart样式 官方配置指南(http://echarts.baidu.com/option.html#yAxis.splitLine.lineStyle.color)
      this.chart.setOption({
        color: this.colors,
        // legend: {
        //   data: this.legend
        // },
        grid: {
          top: '17%',
          left: '5%',
          right: '5%',
          bottom: '22%'
          // containLabel: true
        },
        xAxis: {
          name: this.xname,
          type: 'category',
          boundaryGap: false,
          data: this.lineData,
          axisLabel: {
            color: this.colors[1]
          },
          nameTextStyle: {
            color: this.colors[1]
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 2, // 粗细
              opacity: 0.6
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          name: this.yname,
          type: 'value',
          axisLabel: {
            color: this.colors[1]
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 2, // 粗细
              opacity: 0.6
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              opacity: 0.6
            }
          },
          nameTextStyle: {
            color: this.colors[1]
          },
          axisTick: {
            show: false
          }
        },

        series: this.seriesData
      })
      const _this = this
      window.addEventListener('resize', () => {
        console.log('lineresize')
        _this.chart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
canvas {
  height: 100% !important;
}
</style>
